{{define "api/index.html"}}
<!DOCTYPE html>
<html lang="en">
{{template "common/header.html" .}}
<body>
    <div id="wrapper" class="container">
        {{template "common/navbar.html" .}}
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-8">
                    <h1 class="page-header">连接池节点状态</h1>
                </div>
                <!-- /.col-lg-12 -->
                <div class="col-lg-4">
                    <div>
                        <div id="alert-success" class="alert alert-success fade in hidden">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <strong class="title">Success!</strong>
                            <span class="message">Your message has been sent successfully.</span>
                        </div>
                    </div>
                    <div>
                        <div id="alert-error" class="alert alert-danger fade in hidden">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <strong class="title">Error!</strong>
                            <span class="message">Your message has been sent Error.</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            连接池节点:
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-config">
                                    <thead>
                                        <tr>
                                            <th>Hosts</th>
                                            <th>Status</th>
                                            <th>Time</th>
                                            <th>Message</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{range $v := .Data}}
                                        <tr>
                                            <td>{{.Host}}</td>
                                            <td>{{.Status}}</td>
                                            <td>{{timeFormat .Time}}</td>
                                            <td style="max-width:100px;height:auto;">{{.Msg}}</td>
                                            <td>
                                                <!--<div class="btn-group">
                                                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                                        切换数据中心<span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu pull-right" role="menu">
                                                        <li><a href="#">切换数据中心</a></li>
                                                        <li class="divider"></li>
                                                        {{range $.Datacenter}}
                                                        <li><a href="#" class="switch-dc" data-host="{{$v.Host}}" data-dc="{{.}}" >Switch To: {{.}}</a></li>
                                                        {{end}}
                                                    </ul>
                                                </div>-->
                                            </td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    {{template "common/footer.html" .}}
    <script>
        $(document).ready(function() {
            $(".switch-dc").bind("click", function(){
                var data = $(this).data();
                var msg = "确认要切换数据中心到: "+ data["dc"] +" 吗?";
                if (window.confirm(msg)) {
                    $.post("/admin/api/switchdc", data, function(data){
                        console.log(data);
                        if (data && data.status == 1){ //error
                            $("#alert-error .message").text(data['msg']);
                            $("#alert-error").removeClass("hidden").addClass("show");
                        } else {
                            $("#alert-success .message").text("Switch DataCenter OK");
                            $("#alert-success").removeClass("hidden").addClass("show");
                        }
                    }).error(function(err, res){
                        var msg = err.status + ": " + err.responseText + ", message:" + res;
                        $("#alert-error .message").text(msg);
                        $("#alert-error").removeClass("hidden").addClass("show");
                    });
                }
            });
        });

    </script>
   
</body>

</html>
{{end}}